<template>
	<view class="boxs">
		<view class="tips" v-if="titleInfo[allData.status]">{{titleInfo[allData.status].tip}}</view>
		<view class="page-pad" v-show="allData.id">
			<view>
				<orderInfo :order-info="allData" />
				<view class="form-items">
					<view>
						<text>订单编号</text>
						<view>{{allData.sn}}</view>
					</view>
					<view>
						<text>下单时间</text>
						<view>{{allData.addtime}}</view>
					</view>
					<view v-if="allData.state != -1 && allData.status != 1">
						<text>支付时间</text>
						<view>{{allData.showZfTime }}</view>
					</view>
					<view v-if="allData.state == 3 || allData.status == 4">
						<text>发货时间</text>
						<view>{{allData.showFhTime}}</view>
					</view>
					<view class="uploadFile" v-if="allData.status == 4">
						<view>确认书凭证</view>
						<view class="image-list">
							<image :src="allData.completeImgUrl" mode="aspectFill" @click="priview"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kefu" v-if="allData.status == 2" @click="callPhone" hover-class="hover_class">
			<image src="../../../static/image/version/kefu.png"></image>
			<view>客服电话：{{userInfo.contactTelephone}}</view>
		</view>
	<!-- 	<view class="foot-btn" v-if="allData.status == 2">
			32432
		</view> -->
	</view>
</template>

<script>
import store from '@/store'
import orderInfo from '@/component/orderInfo/index.vue'
import config from 'static/js/config.js'
import {
	orderDetail,
	deleteById,
	changeStatus
} from 'utils/api/order.js'
import {
	userIndex
} from 'utils/api/user.js'
export default {
	data() {
		return {
			allData: {
				productList: [],
				status: ''
			},
			id: '',
			userInfo: {},
			titleInfo: {
				1: {tit: '等待买家付款', tip: '剩余30分钟交易自动关闭'},
				'-1': {tit: '订单已取消', tip: '订单已超时取消，用户可再次去购买'},
				4: {tit: '订单已完成', tip: '买家订单已完成'},
				2: {tit: '等待卖家发货', tip: '买家订单正在准备发货，耐心等待'},
				3: {tit: '卖家已发货', tip: '买家订单已发货，耐心等待'},
			},
			checkType: ''
		}
	},
	components: {
		orderInfo,
	},
	onLoad(data) {
		this.id = data.id
		this.getDetail()
		this.getUserInfo()
	},
	methods: {
		// 电话
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.userInfo.contactTelephone,
				success: function() {
					console.log('拨打电话成功');
				}
			});
		},
		getUserInfo() {
			userIndex().then((res) => {
				this.userInfo = res.data
			})
		},
		priview() {
			uni.previewImage({
				current: 0, //预览图片的下标
				urls: [this.allData.completeImgUrl] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		getDetail() {
			uni.showLoading({
			  title: '加载中',
			  mask: true
			})
			orderDetail({id: this.id}).then((res) => {
				this.allData = res.data
				uni.setNavigationBarTitle({ title: this.titleInfo[res.data.status].tit})
			}).finally(() => {
				uni.hideLoading()
			})
		}
	}
}
</script>

<style scoped lang="scss">
.boxs {
	padding-bottom: 150upx;
	box-sizing: border-box;
	background-color: #F6F6F6;
	min-height: 90vh;
}
.kefu {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	height: 92upx;
	margin-bottom: 32upx;
	>image {
		width: 34upx;
		height: 34upx;
		margin-right: 8upx;
	}
	>view {
		font-size: 28upx;
		color: #000000;
		font-weight: 500;
	}
}
.foot-btn {
	background: #fff;
	height: 100upx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	>view {
		height: 100%;
		width: 250upx;
		background-color: #D9D9D9;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #3E3E3E;
	}
	.confirms {
		background-color: #0B59E0;
		color: #fff;
	}
}
.page-pad {
	>view {
		margin-top: -30px;
		z-index: 10;
	}
}
.tips {
	background-color: #0B59E0;
	text-align: center;
	color: #fff;
	font-size: 24upx;
	box-sizing: border-box;
	padding: 13upx 0 58upx 0;
}
.form-items {
	background-color: #fff;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 36upx 24upx;
	>view:not(:last-child) {
		margin-bottom: 40upx;
	}
	>view {
		display: flex;
		justify-content: space-between;
		>text {
			font-size: 28upx;
			color: #333333;
			display: inline-block;
			min-width: 230upx;
			margin-top: 4upx;
		}
		>view {
			font-size: 28upx;
			color: #333333;
			line-height: 40upx;
			text-align: right;
		}
	}
}
</style>